<template>
  <div>
    <div class="filterVue">
      <div class="filter">
        <span style="padding-right: 10px">盘点门仓</span>
        <el-cascader
          v-model="storeId"
          :options="storeList"
          :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
          @change="handleTransferOutStoreChange"
        ></el-cascader>
      </div>
      <div class="filter">
        <span style="padding-right: 10px">商品分类</span>
        <el-cascader
          ref="cascaderRef"
          v-model="params.category"
          :options="merPlatProductClassify"
          :props="categoryProps"
          clearable
          @change="handleSeachList"
          collapse-tags
          style="width: 220px"
        ></el-cascader>
        <!-- <el-cascader ref="cascader" v-model="params.category" @change="handleSeachList" :options="merPlatProductClassify" :props="categoryProps"></el-cascader> -->
      </div>
      <div class="filter">
        <span style="padding-right: 10px">盘点备注</span>
        <el-input v-model="params.reason" placeholder="请输入" style="width: 190px"></el-input>
      </div>
      <div class="filter">
        <span style="padding-right: 10px">任务截止日期</span>
        <el-date-picker
          v-model="params.deadline"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="width: 190px"
        ></el-date-picker>
      </div>
      <div class="btn" @click="preview">预览盘点任务</div>
      <div class="btn" @click="createFun">生成盘点任务</div>
      <div class="reset" @click="reset">重置表单</div>
    </div>

    <div class="tableVue">
      <div class="tableList">
        <div class="thVue">
          <div class="th" style="width: 250px;">商品编号</div>
          <div class="th" style="flex: 1;">商品名称</div>
          <div class="th" style="width: 250px;">图片</div>
          <div class="th" style="width: 100px;">商品规格</div>
          <div class="th" style="width: 100px;">单位</div>
          <div class="th" style="width: 100px;">应盘库存</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in list" :key="index">
            <div class="td" style="width: 250px;">{{ item.itemNumber }}</div>
            <div class="td" style="flex: 1;">{{ item.productName }}</div>
            <div class="td" style="width: 250px;">
              <img :src="item.image" style="width: 40px; height: 40px" />
            </div>
            <div class="td" style="width: 100px;">{{ item.sku }}</div>
            <div class="td"  style="width: 100px;">{{ item.unitName }}</div>
            <div class="td" style="width: 100px;">{{ item.expectStock }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { listStore } from '@/api/commercial';
import { productCategoryApi } from '@/api/product';
import { stocktakingAdd, stocktakingPreview } from '@/api/msg';
export default {
  data() {
    return {
      params: {
        category: '',
        deadline: '',
        categoryStr: '',
        reason: '',
        storeId: '',
        type: '',
      },
      storeId: "",
      options: [],
      storeList: [
        { name: '仓库', id: 1, children: [] },
        { name: '门店', id: 2, children: [] },
      ],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'childList',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false,
        multiple: true,
      },
      list: [],
    };
  },
  created() {
    this.getStoreList();
  },
  mounted() {
    if (!localStorage.getItem('merPlatProductClassify')) this.$store.dispatch('product/getAdminProductClassify');
  },
  computed: {
    ...mapGetters(['merPlatProductClassify']),
  },
  methods: {
    reset() {
      this.params = {
        category: '',
        categoryStr: '',
        deadline: '',
        reason: '',
        storeId: '',
        type: '',
      };
      this.storeId = ""
    },
    createFun() {
        if (!this.params.category) return this.$message.info('请选择商品分类');
        if (!this.params.storeId) return this.$message.info('请选择盘点门仓');
        if (!this.params.reason) return this.$message.info('请输入盘点备注');
        if (!this.params.deadline) return this.$message.info('请选择截止日期');

      stocktakingAdd(this.params).then((res) => {
        console.log(res);
        this.$message.success("操作成功")
        this.reset()
        this.list = []
      });
    },

    getStoreList() {
      // 类型(1仓库 2门仓)
      listStore({ type: 1, page: 1, limit: 999 }).then((res) => {
        this.storeList[0].children = res.list;
      });
      listStore({ type: 2, page: 1, limit: 999 }).then((resr) => {
        this.storeList[1].children = resr.list;
      });
    },

    handleSeachList(e) {
      this.params.category = e.join(',');
      const checkedNodes = this.$refs.cascaderRef.getCheckedNodes();
      let categoryStr = checkedNodes.map((node) => node.label);
      this.params.categoryStr = categoryStr.join(',');
    },

    handleTransferOutStoreChange(val) {
      this.storeId = val
      this.params.type = val[0];
      this.params.storeId = val[1];
    },

    preview() {
      if (!this.params.category) return this.$message.info('请选择商品分类');
      if (!this.params.storeId) return this.$message.info('请选择盘点门仓');
      stocktakingPreview({
        category: this.params.category,
        storeId: this.params.storeId,
        type: this.params.type,
      }).then((res) => {
        this.list = res;
        console.log('盘点列表', this.list);
      });
    },
  },
};
</script>

<style lang="scss">
.filterVue {
  width: 100%;
  height: 80px;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #fff;
  .filter {
    display: flex;
    align-items: center;
    padding-right: 30px;
  }
  .btn {
    width: 120px;
    height: 32px;
    background: #266fe8;
    border-radius: 4px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    margin-right: 15px;
  }
  .reset {
    width: 90px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    line-height: 32px;
    text-align: center;
    color: #333;

    cursor: pointer;
  }
}
.tableVue {
  width: 100%;
  background: #fff;
  margin-top: 15px;
  .thVue {
    width: 100%;
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    .th {
      color: #333333;
      font-weight: 600;
      text-align: center;
    }
  }
  .tdVue {
    width: 100%;
    height: calc(100vh - 186px - 62px - 70px - 60px);
    overflow-y: scroll;
    .tdItem {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .td {
        text-align: center;
      }
    }
  }
  .tdVue::-webkit-scrollbar {
    width: 0;
  }
}
</style>
